<template>

	<view class="container">
		<!-- <view style="margin:20rpx;">
			<image :src="api.getUrl('/images/banner-wx.jpg')" style="width: 100%;;" mode='widthFix' ></image>
		</view> -->
		<view style="width:100vw">
			<uni-swiper-dot class="uni_swiper" :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay="true">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.content" alt="" style="width: 100vw;" mode="widthFix"></image>
						</view>
					</swiper-item>

				</swiper>
			</uni-swiper-dot>
		</view>

		<view style="margin-top:40rpx;">
			<view class="grid">
				<view class="index-item" v-for="item in items" :key="item.ID" @click="jump(item)">
						<image :src="$api.getUrl(item.Picture)" class="index-item-pic" mode='heightFix'></image>
						<view class="item-txt">
							{{item.Title}}
						</view>
				</view>
				<!-- <view class="index-item">
					<image src="@/static/images/视频.png" class="index-item-pic" mode='heightFix'></image>
					<view class="item-txt">
						网页版生成式文字AI
					</view>
				</view> -->
			</view>

			<!-- <view class="grid">
				<view class="index-item">
					<image src="@/static/images/工作日志.png" class="index-item-pic" mode='heightFix'></image>
					<view class="item-txt">
						企业知识库AI
					</view>
				</view>
				<view class="index-item">
					<image src="@/static/images/微信.png" class="index-item-pic" mode='heightFix'></image>
					<view class="item-txt">
						微信机器人
					</view>
				</view>
				<view class="index-item">
					<image src="@/static/images/抖音.png" class="index-item-pic" mode='heightFix'></image>
					<view class="item-txt">
						抖音机器人
					</view>
				</view>
			</view>
			
			<view class="grid">
				<view class="index-item">
					<image src="@/static/images/照片.png" class="index-item-pic" mode='heightFix'></image>
					<view class="item-txt">
						一键修复老照片
					</view>
				</view>
				
			</view> -->

		</view>


	</view>

</template>

<script>
	import storage from '@/common/storage'
	import api from '@/common/api'
	export default {
		data() {
			return {
				showBox: false,
				user: {},
				keyword: '',
				type: 'center',
				current: 0,
				api: api,
				url: '',
				value: 0,
				path1: 'http://www.baidu.com', //静态图片
				// url:'http://localhost:8870/uploadfile/picture/banner.jpg',//动态图片 后台上传
				mode: 'round',
				// info: [{
				//         content: api.getUrl('/images/banner-wx.jpg')
				//          }, {
				//         content: api.getUrl('/images/banner-wx.jpg')
				//          }, {
				//         content: api.getUrl('/images/banner-wx.jpg')
				//         }],
				info: [],
				current: 0,
				list: [],
				parameter: {
					complete: false
				},
				isShow: false,
				banners: [{
					picture: '/images/banner.jpeg'
				}],
				message: {
					name: '',
					phone: '',
					content: '',
					type: 1,
				},
				items:[]
			}
		},
		onLoad(option) {
			console.log('op', option)
			this.Banner()
			if (option.fid) {
				this.$storage.setData('fid', option.fid);
			}
			this.getproduct()
			// var c = { content: api.getUrl('/images/banner-wx.jpg') }
			// this.info.push(c)
			// this.info.push(c)
			// this.GetProject();
		},
		onShareAppMessage: function() {

		},
		onShow() {
		},
		onPullDownRefresh() {
			this.getproduct()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getproduct(){
				this.$request.post(this.$api.ai.getContentList, {
					cid: 34,pagesize:10
				}, 'form').then(res => {
					if (res) {
						res.data.forEach(item=>{
							if(item.Picture){
								item.Picture='/'+item.Picture.replace('lives_','liveb_')
							}
						})
						this.items=res.data
					}
				})
			},
			jump(item) {
				if (this.$storage.getData('token')) {
					if(item.Url.indexOf('http')>-1 || item.Url=='ChatGPT'){
						uni.navigateTo({
							url: '../index/webview?url=' + item.Url
						})
					}
					else{
						uni.navigateTo({
							url: item.Url
						})
					}
					
				} else {
					uni.showToast({
						icon: "none",
						title: '您尚未登录'
					})
					return
				}
			},
			Banner() {
				this.$request.post(this.$api.ai.getContentClassList, {
					pid: 25
				}, 'form').then(res => {
					if (res) {
						res.data.forEach(t => {
							this.info.push({
								content: api.getUrl('/' + t.Banner)
							})
						})
					}

				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			GetProject() {
				var check = storage.getJson('project')
				if (check == undefined) {
					this.isShow = false
					this.$request.postU(this.$api.project.list, this.parameter).then(res => {
						this.projectList = res.data
						let myrange = []
						if (this.projectList != undefined) {
							this.projectList.forEach(t => {
								myrange.unshift({
									value: t.id,
									text: t.name
								})
							})
							this.list = myrange
							console.log('list', this.list)
						}
						this.$refs.popup.open('center')

					});
				} else {
					this.isShow = true
					this.project = storage.getJson('project')
					console.log('project', this.project)

				}
			},
			submitProject() {
				console.log('value', this.value)
				if (this.value <= 0) {
					uni.showToast({
						icon: "none",
						title: '项目未选取'
					})
					return
				}
				this.project = this.projectList.find((num) => {
					return num.id == this.value;
				})
				storage.setJson('project', this.project)
				uni.reLaunch({
					url: '../index/index' //写你的路径
				});
			},
			ToCase(item, tourl) {
				console.log(item)
				uni.navigateTo({
					url: tourl + "?id=" + item.id + "&name=" + item.name
				})
			},
			NavigateTo(tourl) {
				uni.navigateTo({
					url: tourl
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.message.type = this.current + 1
					console.log('e', this.message.type)
				}
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// showLink:function(index){
			// 	var item=this.links[index]
			// 	if(item.title=='地理位置'){
			// 		uni.getLocation({
			// 			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			// 			geocode: true,
			// 			success: function(res) {
			// 				wx.openLocation({ //​使用微信内置地图查看位置。
			// 					latitude: 29.961869, //要去的纬度-地址
			// 					longitude: 121.450212, //要去的经度-地址
			// 					name: "甬美名妆",
			// 					address: '江北区保黎南路与横六路交叉口西南100米'
			// 				})
			// 			}
			// 		});
			// 	}
			// 	else{
			// 		if(item.nav){
			// 			uni.switchTab({
			// 				url: item.url
			// 			});
			// 		}
			// 		else{
			// 			uni.navigateTo({
			// 				url: item.url
			// 			});
			// 		}
			// 	}
			// },
			getData: function() {
				// this.$request.post('/api/app/content/list',{}).then(res=>{
				// 	console.log('11111',res)

				// 	this.banners=res.data.filter(t=>{
				// 		return t.cid === 1
				// 	})
				// 	this.caselist = res.data.filter(t=>{
				// 		return t.cid === 3
				// 	})
				// 	this.steamlist = res.data.filter(t=>{
				// 		return t.cid === 4
				// 	})
				// 	this.momentlist = res.data.filter(t=>{
				// 		return t.cid === 5
				// 	})
				// });
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/product/show?id=' + id
				});
			}
		}
	}
</script>

<style>
	.swiper-box {
		width: 100vw;

	}

	.grid {
		margin: 10rpx;
		display: flex;

	}

	.index-item {
		border-radius: 10px;
		height: 170rpx;
		width: 250rpx;
		margin: 4px;
		background-color: rgb(56, 63, 67);
		text-align: center;
	}

	.index-item-pic {
		height: 80rpx;
		margin-top: 25rpx;
	}

	.item-txt {
		color: #FFF;
		font-size: 8px;
	}

	.owner-type {
		font-size: 12px;
		font-weight: bold;
	}

	.owner-data {
		font-size: 12px;
	}

	.button {
		background: #c79e68;
		color: #FFF;
	}

	page {
		background-color: #272727;
	}

	.foot {
		text-align: center;
		line-height: 100rpx;
		color: #999;
		clear: both;
	}

	.link {
		float: left;
		width: 25%;
		text-align: center;
		margin-top: 40rpx;
		overflow: hidden;
	}

	.link view {
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		line-height: 120rpx;
		margin-bottom: 10rpx;
	}

	.links {
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.search-box {
		position: relative;
		padding: 0 20rpx;
	}

	.search button {
		width: 100%;
	}

	.userhead {
		position: absolute;
		top: 16rpx;
		left: 20rpx;
	}

	.userhead image {
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}

	.userhead button {
		padding: 0 20rpx;
	}

	.search {
		padding-left: 200rpx;
		box-sizing: border-box;
		padding-top: 16rpx;
	}

	.location {
		margin-top: 10rpx;
		padding: 0 20rpx;
	}

	.location uni-icons {
		float: left;
		color: #999;
	}

	.location text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.location button {
		float: right;
	}

	.joblist-box {
		padding: 10rpx 20rpx;
	}

	.joblist {
		position: relative;
		margin-top: 20rpx;
		box-shadow: 5rpx 5rpx 15rpx #ccc;
		padding: 10rpx 20rpx 20rpx 20rpx;
	}

	.joblist image {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.jobinfo {
		width: 100%;
		padding-left: 130rpx;
		box-sizing: border-box;
		height: 120rpx;
	}

	.jobinfo .t {
		margin-top: 10rpx;
		line-height: 40rpx;
	}

	.jobcom .m {
		color: #cc0000;
		font-weight: bold;
		line-height: 40rpx;
		float: right;
	}

	.jobbom text {
		color: #999;
	}

	.jobtime {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		font-size: 28rpx;
		text-align: right;
	}

	.ts {
		font-weight: bold;
		line-height: 40rpx;
	}

	.jobcom {
		color: #333333;
		margin-left: 10rpx;
	}

	.ta {
		font-size: 28rpx;
		line-height: 20px;
		color: #666;
	}

	.swiper-container {
		height: 400rpx;
	}

	.imgstyle {
		width: 100%;
		height: 100%;
	}

	.advantage {
		width: 50%;
		float: left;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.box {
		background: #fff;
		border: 1px solid #ececec;
		padding: 10px;
		margin-bottom: 10px;
	}

	.point {
		float: right;
		width: 10px;
		height: 10px;
		border: 2px solid #fff;
		box-shadow: 0px 0px 6px #bebdbd;
		border-radius: 50%;
		background: #999999;
	}

	.box:hover {
		box-shadow: 0 0 20px #e4e4e4;
	}

	.box:hover .point {
		background: #e74c3c;
	}

	.text {
		color: #3c3c3c;
		font-weight: 600;
		font-size: 16px;
	}

	.box text {
		font-size: 12px;
		margin-top: 10px;
	}

	.aboutlist {
		padding: 10px 10px 0 10px;
		margin: 0px auto;
	}

	.line {
		height: 10px;
		background: #ddd;
	}

	.quote {
		padding: 20px 20px 10px 20px;
		box-shadow: 0 0 10px #e4e4e4;
		width: 250px
	}

	.quote-title {
		width: 300px;
		background: #373737;
		color: #fff;
		font-size: 14px;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		margin-bottom: 10px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.messagebox {
		text-align: center;
	}

	.casebox {
		text-align: center;
	}

	.casestyle {
		position: relative;
		width: 50%;
		height: 160px;
		float: left;
		padding-left: 7px;
		padding-right: 7px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.caseimg {
		width: 100%;
		height: 100%;
	}

	.casetitle {
		max-width: 45%;
		color: #fff;
		display: -webkit-box;
		font-size: 13px;
		line-height: 40px;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.memberlist {
		background-color: black;
		color: #ffffff;
		;
		height: 40px;
		width: 100%;
		padding-left: 5px;
		box-sizing: border-box;
		line-height: 40px;
		display: flex;
		justify-content: space-evenly;
	}

	.sevice {

		width: 100%;
		height: 300px;
		background-size: auto 100% !important;
		background-position: center center;

	}

	.seviceimg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.background {
		content: "";
		position: relative;
		top: -300px;
		width: 100%;
		height: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.sevice_content {
		position: relative;
		top: -260px;
		height: 0px;
		z-index: 1;
		color: #FFF;
		text-align: center;
	}

	.moment_title {
		position: relative;
		background: rgba(0, 0, 0, 0.5);
		top: -46px;
		height: 40px;
		color: #FFF;
		z-index: 1;
		line-height: 30px;
		padding-top: 5px;
		font-size: 16px;
		box-sizing: border-box;
		text-align: left;
		padding-left: 10px;
	}

	.kuang {
		border: 5px solid #fff;
		box-shadow: 0px 0px 6px #bebdbd;
		position: relative;
		margin: 5px;
		height: 280px;
		width: 80%;
		margin-left: 10%;
		background-size: cover !important;
		background-position: center !important;
	}
</style>